<template>
  <div class="form-setting-group form-common-setting">
    <h4 class="form-common-setting-title">
      <span class="form-common-setting-title-name">{{ title }}</span>
      <span v-if="info">
        <el-tooltip class="item" effect="dark" :content="info" placement="top">
          <i class="iconfont icon-question"></i>
        </el-tooltip>
      </span>
      <span class="form-common-setting-title-remind">{{$t('common.base.formMaxLenthTips', {maxLength: 128})}}</span>
    </h4>
    <div class="form-type-text-lang">
      <textarea :placeholder="placeHolder" :disabled="disabled" rows="3" data-prop="placeHolder" v-model="field.placeHolder" @input="update" :maxlength="TitleShowMaxLengthMax"></textarea>
      <base-select-language 
        v-if="isShow"
        :title="title"
        :field="field"
        :is-require="false"
        :defaultOption="{
          formType:'textarea',
          disabled: disabled,
        }"
        :maxlength="TitleShowMaxLengthMax"
        defaultFormType="textarea"
        :defaultValue="field.placeHolder"
        :defaultValueLanguage="field.placeHolderLanguage || {}"
        @save="save"
      >
      </base-select-language>
    </div>
  </div>
</template>

<script>
/* config */
import * as config from '@src/component/form/config';
/* props */
import { settingProps } from '@src/component/form/components/props';
// utils
import { languagesList, isMultiLangModules } from '@src/component/util/multiLang/index';
import { DefaultLang } from '@src/util/languages.js';
import locales, { t } from '@src/locales';
import { getOpenMultiLanguage } from '@hooks/useFormMultiLanguage'

export default {
  name: 'form-describe-setting',
  props: {
    ...settingProps, 
    disabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: t('common.base.helpTips')
    },
    placeHolder: {
      type: String,
      default: t('common.base.helpTipsMsg')
    },
    info:{
      type: String,
      default:''
    }
  },
  setup(){
    return {
      languagesList,
    }
  },
  computed: {
    // 描述信息展示最大数量
    TitleShowMaxLengthMax() {
      return config.FIELD_PLACEHOLER_LENGTH_MAX;
    },
    // 事件表单+回执表单显示多语言配置
    isShow() {
      const isOpenMultiLanguage = getOpenMultiLanguage();
      return isOpenMultiLanguage && isMultiLangModules(this.mode) && this.field.formType !== 'relationCustomer' && this.field.formType !== 'relationProduct';
    
    }
  },
  methods: {
    update(value) {
      this.$emit('input', value, 'placeHolder');
      // 获取新值后，回填多语言字段
      let data = {}
      if (this.field.placeHolderLanguage) {
        data = {...this.field.placeHolderLanguage, [locales.locale]: value?.target?.value || ''}
      }else{
        data = {...DefaultLang(), [locales.locale]: value?.target?.value || ''}
      }
      this.save(data)
    },
    save(data){
      /**  适配原有逻辑，将数据组合成 实例
      * 具体可查看 .\src\component\form\FormDesign.js 的 input 和 form-title-setting 引用的 @input="updateForDom"
      */
      // 中文数据回填
      if(this.field.placeHolder !== data[locales.locale]){
        this.field.placeHolder = data[locales.locale]
      }

      const event ={
        target: {
          dataset: {
            prop: 'placeHolderLanguage'
          },
          value: data
        }
      }
     this.$emit('input', event);
    }
  }
}
</script>
<style lang="scss" scoped>
.form-type-text-lang{
    display: flex;
    textarea {
      flex: 1;
    }
    p{
      width: 32px;
      height: 32px;
      background: #F5F8FA;
      border-radius: 4px;
      border: 1px solid #CBD6E2;
      text-align: center;
      line-height: 30px;
      margin-left: 8px;
      .iconfont{
        font-size: 18px;
        color: #595959;
      }
    }
  }
</style>